<template>
  <div class="book-type-box">
    <div class="search-box">
      <el-input v-model="queryBookTypeForm.typeName" placeholder="请输入类型名称搜索" clearable/>
      <el-button type="primary" @click="queryBookTypeList">点击查询</el-button>
      <el-button type="success" @click="addBookType">添加类型</el-button>
    </div>
    <el-table :data="bookTypeList" style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="typeCode" label="类型编码" width="180"></el-table-column>
      <el-table-column prop="typeName" label="类型名称" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm title="确认删除该类型吗" @confirm="deleteType(scope.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
          <el-button style="margin-left: 8px" type="warning" @click="updateDialogVisible(scope.row)" size="mini">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryBookTypeForm.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryBookTypeForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
    <el-dialog title="新增书籍类型" :visible.sync="addTypeDialogFormVisible">
      <el-form :model="addTypeForm">
        <el-form-item label="类型编码" :label-width="formLabelWidth">
          <el-input v-model="addTypeForm.typeCode" autocomplete="off" placeholder="请输入类型编码，不可为空" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-input v-model="addTypeForm.typeName" autocomplete="off" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTypeDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddBookType">确 定</el-button>
      </div>
    </el-dialog>  
    <el-dialog title="修改书籍类型" :visible.sync="updateTypeDialogFormVisible">
      <el-form :model="addTypeForm">
        <el-form-item label="类型编码" :label-width="formLabelWidth">
          <el-input v-model="updateTypeObj.typeCode" autocomplete="off" placeholder="请输入类型编码，不可为空" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-input v-model="updateTypeObj.typeName" autocomplete="off" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdateType">取 消</el-button>
        <el-button type="primary" @click="confirmUpdateBookType">确 定</el-button>
      </div>
    </el-dialog> 
  </div>
</template>

<script>
export default {
  data(){
    return {
      queryBookTypeForm:{
        "typeName": "",
        "pageNo": 1,
        "pageSize": 10
      },
      bookTypeList: [],
      totals: 0,
      addTypeDialogFormVisible: false,
      formLabelWidth: "120px",
      addTypeForm: {
        "typeCode": "",
        "typeName": ""
      },
      updateTypeDialogFormVisible: false,
      updateTypeObj: {}
    }
  },
  created(){
    this.queryBookTypeList()
  },
  methods:{
    queryBookTypeList(){
      this.$http.post('/type/queryBookTypes', this.queryBookTypeForm).then(res => {
        if (res.data){
          this.bookTypeList = res.data.bookTypeList
          this.totals = res.data.totals
        }
      })
    },
    deleteType(row){
      this.$http.get(`/type/deleteBookType/${row.typeId}`).then(res => {
        if (res.code && res.success){
          this.$message.success(res.msg || '删除成功')
          this.queryBookTypeList()
        }
      })
    },
    handleSizeChange(val) {
      this.queryBookTypeForm.pageSize = val
      this.queryBookTypeList()
    },
    handleCurrentChange(val) {
      this.queryBookTypeForm.pageNo = val
      this.queryBookTypeList()
    },
    addBookType(){
      this.addTypeDialogFormVisible = true
    },
    confirmAddBookType(){
      this.$http.post('/type/addBookType', this.addTypeForm).then(res => {
        if (res.code && res.success){
          this.$message.success(res.msg || '添加成功')
          this.addTypeDialogFormVisible = false
          this.addTypeForm = {}
          this.queryBookTypeList()
        }
      })
    },
    updateDialogVisible(row){
      this.updateTypeObj = row
      this.updateTypeDialogFormVisible = true
    },
    cancelUpdateType(){
      this.queryBookTypeList()
      this.updateTypeDialogFormVisible = false
    },
    confirmUpdateBookType(){
      this.$http.post('/type/updateBookType', this.updateTypeObj).then(res => {
        if (res.code && res.success){
          this.$message.success(res.msg || '修改成功')
          this.updateTypeDialogFormVisible = false
          this.queryBookTypeList()
        }
      })
    }
  },
}
</script>

<style scoped>
.book-type-box .search-box{
  width: 100%;
  margin-bottom: 8px;
}

.book-type-box .search-box .el-input{
  width: 60%;
  margin-right: 8px;
}

</style>